<template>

	<view class="category-nav">
		 <block v-for="(category, index) in categories" :key="index">
			<view class="catrgory-nav-itmes"  @click="onClick(index)">
				<image :src='category.image_url' class="category-img" mode=""></image>
				<view class="category-text" :class="{'item-active': activeIndex === index}"> {{ category.name }} </view>
			</view>
			
		</block>
	</view>	
</template>

<script>
import { getCategories } from "api/categoryApi"

export default {
  name: "CategoryNavCom",
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      categories: [
        
      ], 
      activeIndex: 0,
      scrollLeft: 0,
      defaultConfig: {
        textColor: '#333333',
        activeColor: '#000000',
        underlineWidth: 24,
        underlineColor: '#FFE066'
      },
      underline: {
        left: 0
      }
    }
  },
  watch: {
    defaultIndex: {
      handler(val) {
        this.activeIndex = val
      },
      immediate: true
    },
    categories: {
      handler() {
        setTimeout(() => {
          this.updateUnderline()
        }, 0)
      },
      immediate: true
    },
    config: {
      handler(val) {
        this.defaultConfig = { ...this.defaultConfig, ...val }
      },
      immediate: true
    }
  },
  methods: {
    async loadCategories() {
      const response = await getCategories()
	  
      const categories = this.categories.concat(response)
      this.categories = categories
    },
    updateUnderline() {
      let list = this.categories
      if (list.length === 0) return;
      const query = uni.createSelectorQuery().in(this)
      list.forEach((item, index) => {
        query.select('#_c_' + index)
            .boundingClientRect((res) => {
              if (res) {
                item._underline = {
                  left: res.left + (res.width - this.defaultConfig.underlineWidth) / 2
                }
                if (list.length - 1 === index) {
                  this.slideToIndex()
                }
              }
            }).exec()
      })
    },
    slideToIndex() {
      const index = this.activeIndex
      this.underline = {
        left: this.categories[index]._underline.left
      }
      this.scrollLeft = this.activeIndex * this.defaultConfig.underlineWidth * 2
    },
    onClick(index) {
      this.activeIndex = index
      this.$emit('categoryClicked', {index: index, id: this.categories[index].id, 'default':this.categories[index].is_default })
    }
  },
  created() {
    this.loadCategories()
  }
}
</script>

<style lang="scss" scoped>
.category-nav {
	font-size: 26rpx;
	width:718rpx;
	margin:36rpx auto 0rpx;
	overflow:hidden;
	.catrgory-nav-itmes{
		width:132rpx;
		text-align: center;
		font-size:26rpx;
		float:left;
		margin-left:64rpx;
		.category-img {
			width:132rpx;
			height:132rpx;
		};
		.category-text{
			margin:20rpx auto;
			width:126rpx;
			height:38rpx;
			line-height:38rpx;
			text-align: center;
		}
	}
	.catrgory-nav-itmes:nth-child(4n+1){
		margin-left:0rpx;
	}
	.item-active{
		color:#fff;
		background:#D84C29;
		border-radius: 50rpx;
		
	}
	
	
}
</style>
